<template>
  <div class="top" v-loading="loading">
    <div
      class="image-aside-list"
      v-for="item in classList"
      :key="item.id"
      :class="{ active: item.id === activeId }"
      @click="handleChangeActiveId(item.id)"
    >
      <p class="truncate text-sm" style="color: #000">{{ item.name }}</p>
      <el-button
        text
        type="primary"
        class="ml-auto px-1"
        @click="imageEdit(item)"
      >
        <el-icon :size="14">
          <Edit />
        </el-icon>
      </el-button>
      <el-button text type="primary" class="px-1 mr-1" @click="del(item.id)">
        <el-icon :size="14">
          <Close />
        </el-icon>
      </el-button>
    </div>
  </div>
  <div class="bottom">
    <el-pagination
      background
      layout="prev, next"
      :total="total"
      :current-page="pages"
      :page-size="limit"
      @current-change="changePage"
    />
  </div>
  <Drawer ref="imgDrawerRef" :title="title" @submit="submit">
    <el-form
      ref="rulesRef"
      :model="imageParams"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="相册名称" prop="name">
        <el-input v-model="imageParams.name" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="imageParams.order" :min="1" :max="1000" />
      </el-form-item>
    </el-form>
  </Drawer>
</template>
<script setup>
import { reactive, ref } from "vue";
import {
  getImageClass,
  addImgClass,
  editImageClass,
  delImageClass,
} from "@/api/image";
import Drawer from "@/components/Drawer/index.vue";
import { Toast } from "@/utils/utils";

let pages = ref(1); //当前页
let total = ref(0); //总条数
let limit = ref(10); // 每一页显示多少
let classList = ref([]); // 列表
let activeId = ref(); // 当前点击的id
const loading = ref(false); // loading效果

const getData = () => {
  loading.value = true;
  getImageClass(pages.value).then((res) => {
    loading.value = false;
    classList.value = res.data.list;
    activeId.value = res.data.list[0].id;
    handleChangeActiveId(res.data.list[0].id);
    total.value = res.data.totalCount;
  });
};
getData();

// 分页
const changePage = (e) => {
  pages.value = e;
  getData();
};

// 新增
const imgDrawerRef = ref(null);
const rulesRef = ref();
const editId = ref();

const title = ref("新增");
const imageParams = reactive({
  name: "",
  order: 50,
});
// 验证规则
const rules = reactive({
  name: [{ required: true, message: "请输入图库名称", trigger: "blur" }],
});
//   添加
const addImageClass = () => {
  imageParams.name = "";
  imageParams.order = 50;
  imgDrawerRef.value.openDrawer();
};
const submit = () => {
  rulesRef.value.validate((valid) => {
    if (!valid) return;
    // 判断走添加还是修改
    if (title.value === "新增") {
      addImgClass(imageParams).then((res) => {
        if (res.status == 200) {
          Toast("添加成功");
          getData();
          imgDrawerRef.value.closeDrawer();
        }
      });
    } else {
      editImageClass(editId.value, imageParams).then((res) => {
        if (res.status == 200) {
          Toast("修改成功");
          getData();
          imgDrawerRef.value.closeDrawer();
        }
      });
    }
  });
};

// 修改
const imageEdit = (item) => {
  imageParams.name = item.name;
  imageParams.order = item.order;
  imageParams.id = item.id;
  editId.value = item.id;
  title.value = "修改";
  imgDrawerRef.value.openDrawer();
};
// 删除
const del = (id) => {
  delImageClass(id).then((res) => {
    if (res.data) {
      Toast("删除成功");
    } else {
      Toast("删除失败", "error");
    }
  });
};

// 切换分类向父元素传递分类的id

const emit = defineEmits(["change"]);
function handleChangeActiveId(id) {
  activeId.value = id;
  emit("change", id);
}

defineExpose({
  addImageClass,
});
</script>
<style>
.image-aside .top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .image-aside-list {
  cursor: pointer;
  @apply flex items-center p-3;
}

.image-aside .image-aside-list:hover,
.active {
  @apply bg-blue-50;
}

.image-aside .bottom {
  position: absolute;
  height: 50px;
  line-height: 50px;
  bottom: 0;
}

.el-form-item__label {
  text-align: right;
}
</style>
